<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="">
    <title></title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <% include("../inc/input_css.html"){}%>
    <style>
        .control-label{
            width: 140px!important;
        }
    </style>

</head>
<body>
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left mbx navbar_title">
            <span class="current">商品管理</span>
            <span class="line">/</span>
            <span class="current"><a href="list">规格管理</a></span><span class="line">/</span>
            添加规格
        </div>
    </div>
    <div class="ibox-content">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="padding-40">
                    <form id="" action="save" method="post" class="form-horizontal form-validate">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="maroon">*</span>名称</label>
                            <div class="col-sm-3">
                                <input type="text" name="specification.name" value="${specification.name!}" class="form-control light-input" maxlength="15" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-3">
                                <select id="type" name="specification.type" value="${specification.type!}" class="form-control light-input" style="height: 31px">
                                    <option value="text">文本</option>
                                    <option value="image">图片</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-3">
                                <input type="text" name="specification.memo" value="${specification.memo!}" class="form-control light-input" maxlength="15" >
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-3">
                                <input type="number" name="specification.order" value="${specification.order!}" class="form-control light-input" maxlength="15" >
                            </div>
                        </div>-->
                        <table id="specificationTable" class="input">
                            <tr>
                                <td>
                                    &nbsp;
                                </td>
                                <td colspan="4">
                                    <div href="javascript:(0);" id="addSpecificationValueButton" class="button hive-btn hive-btn-primary margin-left-15"><i class="icon-add" aria-hidden="true"></i>增加规格值</div>
                                </td>
                            </tr>
                            <tr class="" style="background-color: #f8f8f8">
                                <td>&nbsp;</td>
                                <td>规格值名称</td>
                                <td>规格值图片</td>
                                <td>规格值排序</td>
                                <td>删除</td>
                            </tr>
                            <tr class="specificationValueTr">
                                <td>
                                    &nbsp;
                                </td>
                                <td>
                                    <input type="text" name="specificationValues[0].name" class="form-control light-input" style="width: 180px" required="true"/>
                                </td>
                                <td>
                                    <span class="fieldSet">
                                        <!--<input type="text" name="specificationValues[0].image" class="text specificationValuesImage" maxlength="200" disabled="disabled" />-->
                                        <!--<input type="hidden" name="specificationValues[0].image" value="" class="pull-left form-control light-input"/>-->
                                        <input type="hidden" name="specificationValues[0].image" value="" class="specificationValuesImage pull-left form-control light-input"/>
                                        <img class="img-rounded" src="" style="max-height:50px;"/>
                                        <input type="button" class="button browserButton" value="选择文件" disabled="disabled" />
                                    </span>
                                </td>
                                <td>
                                    <input type="text" name="specificationValues[0].order" class="form-control light-input" maxlength="9" style="width: 150px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"/>
                                </td>
                                <td>
                                    <a href="javascript:void(0)" class="deleteSpecificationValue icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a>
                                </td>
                            </tr>
                        </table>
                        <div class="form-group" style="margin-top: 24px;text-align: center">
                            <label class="col-sm-2 control-label "></label>
                            <div class="col-sm-4 col-sm-offset-0">
                                <button class="hive-btn-cancle" id="btn_cancle" type="button" onclick="history.back()">&nbsp;取消&nbsp;</button>
                                <button class="hive-btn hive-btn-primary margin-left-8" type="submit">&nbsp;提交&nbsp;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<% include("../inc/input_js.html"){}%>

<!-- 自定义js -->
<script src="/res/js/jquery-migrate-1.2.1.js"></script><!--jquery1.9 以上补丁-->
<script type="text/javascript">
    var uploadUrl="/file/uploadfile?shopId=${shopId!}&type=d";
    var browserUrl="/file/browser?shopId=${shopId!}";
</script>
<script src="https://static.9hive.cn/global/vendor/file/file.js"></script>
<script type="text/javascript">
    $(function () {
        $("input.browserButton").browser();
    })


</script>
<script type="text/javascript">
    $().ready(function() {
        var $inputForm = $("#inputForm");
        var $specificationTable = $("#specificationTable");
        var $type = $("#type");
        var $addSpecificationValueButton = $("#addSpecificationValueButton");
        var $deleteSpecificationValue = $("a.deleteSpecificationValue");
        var specificationValueIndex = 1;

        // 修改规格类型
        $type.change(function() {
            if ($(this).val() == "text") {
                $("input.specificationValuesImage").val("").prop("disabled", true);
                $("input.browserButton").prop("disabled", true);
                $(".img-rounded").hide();
            } else {
                $("input.specificationValuesImage").hide();
                $("input.browserButton").prop("disabled", false);
                $(".img-rounded").show();
            }
        });

        //$("input.browserButton").browser();

        // 增加规格值
        $addSpecificationValueButton.click(function() {//
            if ($type.val() == "text") {
                var trHtml = '<tr class="specificationValueTr"> <td> &nbsp; <\/td> <td> <input required type="text" name="specificationValues[' + specificationValueIndex + '].name" class="form-control light-input" style="width: 180px" \/> <\/td> <td> <span class="fieldSet"> <input type="hidden" name="specificationValues[' + specificationValueIndex + '].image" class="specificationValuesImage pull-left form-control light-input"/><img class="img-rounded" src="" style="max-height:50px;"/> <input type="button" class="button browserButton" value="选择文件" disabled="disabled" \/> <\/span> <\/td> <td> <input type="text" name="specificationValues[' + specificationValueIndex + '].order" maxlength="9" class="form-control light-input" style="width: 150px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'\')}else{this.value=this.value.replace(/\\D/g,\'\')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'0\')}else{this.value=this.value.replace(/\\D/g,\'\')}" \/> <\/td> <td><a href="javascript:void(0)" class="deleteSpecificationValue icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a>  <\/td> <\/tr>';
            } else {
                var trHtml = '<tr class="specificationValueTr"> <td> &nbsp; <\/td> <td> <input required type="text" name="specificationValues[' + specificationValueIndex + '].name" class="form-control light-input" style="width: 180px" \/> <\/td> <td> <span class="fieldSet"> <input type="hidden" name="specificationValues[' + specificationValueIndex + '].image" class="specificationValuesImage pull-left form-control light-input"/> <img class="img-rounded" src="" style="max-height:50px;"/> <input type="button" class="button browserButton" value="选择文件" \/> <\/span> <\/td> <td> <input type="text" name="specificationValues[' + specificationValueIndex + '].order" class="form-control light-input" maxlength="9" style="width: 150px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'\')}else{this.value=this.value.replace(/\\D/g,\'\')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'0\')}else{this.value=this.value.replace(/\\D/g,\'\')}" \/> <\/td> <td><a href="javascript:void(0)" class="deleteSpecificationValue icon-delete hive_icon color_danger" data-toggle="tooltip" data-placement="top" title="删除"></a><\/td> <\/tr>';
            }
            $specificationTable.append(trHtml).find("input.browserButton:last").browser();
            specificationValueIndex ++;
        });

        // 删除规格值
        $deleteSpecificationValue.live("click", function() {
            var $this = $(this);
            if ($specificationTable.find("tr.specificationValueTr").size() <= 1) {
                //$.message("warn", "必须至少保留一个规格值");
                layer.msg("必须至少保留一个规格值");
            } else {
                $this.closest("tr").remove();
            }
        });

        $.validator.addClassRules({
            specificationValuesName: {
                required: true
            },
            specificationValuesImage: {
                required: true
            },
            specificationValuesOrder: {
                digits: true
            }
        });

        // 表单验证
        /*$inputForm.validate({
         rules: {
         name: "required",
         order: "digits"
         }
         });*/

    });
</script>
</body>
</html>